<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分班消息推送</title>
    <script src="../bootstrap/jquery.3.2.1.min.js"></script>
    <script src="../vue/Vue.js"></script>
    <script src="../vue/axios.js"></script>
    <script src="../layui/layer/layer.js"></script>
</head>
<body>
<div id="app">
    <div id="font" style="position:fixed; background:#98bf21;height:200px;width:250px;font-size: 12px; bottom: 5px; right: 5px" @click="clickimg()">

    </div>
</div>
</body>
<script>
    var messagess;
    var websocket = null;
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8081/websocket");
    }else {
        alert("浏览器不支持websocket");
    }

    websocket.onopen = function(event){
        console.log("建立连接");
    }
    websocket.onclose = function (event) {
        console.log("关闭连接");
    }
    websocket.onmessage = function (event) {
        console.log("接收到消息"+event.data);
        messagess = event.data;
        alert(messagess)
        if (messagess != null){
            $("#font").animate({
                height:'toggle'
            });
            $("#font").html(messagess)
        }
        //弹出提醒
    }
    websocket.onerror = function (event) {
        webSocket.close();

    }
    //动画消失
    $(document).ready(function () {
        $("#font").hide();
    })

    //vue
    new Vue({
        el:"#app",
        data:{
            message:"",
        },
        methods:{
            clickimg:function () {
                var messages = document.getElementById("font").innerHTML;
                alert(messages+"111")

                layer.open({
                    type: 2,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['500px', '500px'], //宽高
                    time :1000000,
                    anim :5,
                    resize :true,
                    shade: [0.8, '#393D49'],
                    content:'beginStudent.html?messages='+messages,
                });
            }
        },
        mounted(){
            var id = 2;
            //获取用户id
            axios
                .get("/divide/sid/"+id)
                .then(res=>{
                    console.info(res.data.code)
                    this.message = res.data.data;
                     message = res.data.data;
                    console.info(this.message)
                    if (res.data.code == 400){

                        $("#font").animate({
                            height:'toggle'
                        });
                        $("#font").html(message)
                    }
                });
        }
    });
</script>
</html>